<template>
  <div class="me" :style="{ height: appHeight + 'px' }">
    <userInfo></userInfo>

    <div class="scroll_area">
      <relevant></relevant>
      <div class="action_wrap">
        <div class="action_list">
          <nut-collapse v-model="val">
            <nut-collapse-item :name="item.name" v-for="item in collapse_list" :key="item.id">
              <template #icon>
                <iconpark-icon class="close" icon-id="xia" size="1.3rem"></iconpark-icon>
              </template>
              <template #title>
                <div class="item_left">
                  <iconpark-icon class="close mr-4" :icon-id="item.icon" size="1.3rem"></iconpark-icon>
                  <span>{{ t(item.label) }}</span>
                  <div class="unread" v-if="item.name == 'service' && item.id == 2 && pageStore.unread">
                    {{ pageStore.unread }}
                  </div>
                </div>
              </template>
              <div style="padding: 0 6px">
                <div class="list-sub_item mb-10" v-shrink-on-click v-for="opt in item.subList" :key="opt.id"
                  @click="handleClick(opt)">
                  <div class="item-left">
                    <iconpark-icon class="close mr-4" :icon-id="opt.icon" size="1.3rem"></iconpark-icon>
                    <nut-badge :value="item.name == 'service' && opt.id == 11 ? pageStore.unread : ''
                      ">
                      <span>{{ t(opt.label) }}</span>
                    </nut-badge>
                  </div>
                  <iconpark-icon class="close mr-4" icon-id="mineiconfangx03" size="1.3rem"></iconpark-icon>
                </div>
              </div>
            </nut-collapse-item>
          </nut-collapse>
          <!-- 其他 -->
          <div class="other_list_item mb-10" v-shrink-on-click v-for="item in list" :key="item.id"
            @click="goToPage(item)">
            <div class="item_left">
              <iconpark-icon :icon-id="item.icon" size="1.3rem" class="mr-4"></iconpark-icon>
              <span>{{ t(item.label) }}</span>
            </div>
          </div>
        </div>
        <!-- 退出登录 -->
        <div class="sign_out" v-if="hasLogin" @click="signOut">
          <iconpark-icon icon-id="tuichu" size="1.3rem" class="mr-4"></iconpark-icon>
          <span>{{ t("mine_mylogout") }}</span>
        </div>
      </div>
      <!-- <group></group> -->
    </div>
    <!-- 分享弹窗 -->
    <shareModal v-model:visible="visible"></shareModal>
    <!-- 有奖反馈 -->
    <Modal v-model:visible="isShow" :title="t('rewarded_feedback')" @close="content = ''">
      <div class="popup_body">
        <!--                <div class="info">请输入您要反馈的信息</div>-->
        <nut-textarea v-model="content" :placeholder="t('placeholder_1')" :rows="6" />
        <div class="submit_btn">
          <nut-button class="submit" @click="submit">{{
            t("btn_label_submit")
          }}</nut-button>
        </div>
      </div>
    </Modal>
    <Toast v-model:visible="showToast">{{ t(toast_value) }}</Toast>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import userInfo from "./components/userInfo.vue";
import relevant from "./components/relevant.vue";
// import group from './components/group.vue'

import Modal from "@/components/Modal.vue";
//import { Net } from '@/net/Net';
import H5Websocket from "@/net/Net1";
import { MessageEvent2 } from "@/net/MessageEvent2";
import { NetPacket } from "@/netBase/NetPacket";
import { NetMsgType } from "@/netBase/NetMsgType";
import { User } from "@/store/user";
import { Page } from "@/store/page";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { Local } from "@/utils/storage";
import shareModal from "./components/shareModal.vue";
import { handleOpenLink } from "@/utils/publicMethods";
import { aaa, bbb } from "@/net/Utils";
import Toast from "@/components/Toast.vue";
import { useI18n } from "vue-i18n";
import { getDeviceType } from "@/utils/publicMethods";
const { t } = useI18n();
const store = User(pinia);
const pageStore = Page(pinia);
const router = useRouter();
const visible = ref(false);
const isShow = ref(false); // 有奖反馈控制
const content = ref("");
const { serviceUrlObj, settings } = storeToRefs(pageStore);
const { roleInfo, hasLogin, appHeight } = storeToRefs(store);
const val = ref([]);
const showToast = ref(false);
const toast_value = ref("");
const collapse_list = [
  {
    label: "records_center",
    icon: "jiluzhongxin",
    id: 1,
    name: "record",
    subList: [
      {
        label: "recharge_record",
        icon: "document3",
        id: 1,
        route: "record",
        query: { page: "recharge" },
      }, // 充值记录
      {
        label: "mine_mywithdraw",
        icon: "document2",
        id: 2,
        route: "record",
        query: { page: "withdraw" },
      }, // 提款记录
      {
        label: "mine_mybet",
        icon: "document4",
        id: 3,
        route: "record",
        query: { page: "bet" },
      }, // 投注记录
      {
        label: "mine_myaudit",
        icon: "document1",
        id: 4,
        route: "record",
        query: { page: "account" },
      }, // 账变记录
      {
        label: "rakeback_records",
        icon: "liushui",
        id: 5,
        route: "record",
        query: { page: "audit" },
      }, // 流水记录
      {
        label: "route_page_washRecord",
        icon: "document5",
        id: 6,
        route: "record",
        query: { page: "wash" },
      }, // 洗码记录
      {
        label: "route_page_loginRecord",
        icon: "document5",
        id: 7,
        route: "login_record",
      }, // 登录记录
    ],
  },
  {
    label: "mine_myservice",
    icon: "kefu1",
    id: 2,
    name: "service",
    subList: [
      { label: "home_page_chat", icon: "liaotians", id: 11, url: "" },
      {
        label: "home_page_onlineService",
        icon: "zaixiankf",
        id: 6,
        url: "service_live_url",
      },
      { label: "Message", icon: "messenger", id: 7, url: "service_message_url" },
      { label: "telegram", icon: "feiji", id: 8, url: "service_tg_url" },
    ],
  },
  {
    label: "app",
    icon: "app",
    id: 3,
    name: "app",
    subList: [
      { label: "share", icon: "fenxiang", id: 9 },
      { label: "download", icon: "xiazai", id: 10 },
    ],
  },
];
const list = [
  { label: "mine_mypay", icon: "zhifu", id: 1, url: "/paymentManagement" }, // 支付管理
  { label: "security_setting", icon: "security1", id: 2, url: "/securitySettings" }, // 安全设置
  { label: "rewarded_feedback", icon: "feedback1", id: 3 }, // 有奖反馈
];

// 功能点击
const handleClick = async (item: any) => {
  if (item.route) {
    return router.push({
      name: item.route,
      query: item.query,
    });
  }
  switch (item.id) {
    case 1:
      break;
    case 6: // 在线客服
    case 7: // Message
    case 8: // 小飞机
      handleOpenLink(serviceUrlObj.value[item.url]);
      break;
    case 9: // 分享
      visible.value = true;
      break;
    case 10: // 下载
      const deviceType = getDeviceType();
      //console.log(deviceType); // 输出: iOS 或 Android 或 unknown
      if (deviceType == "iOS") {
        handleOpenLink(settings.value.appDownTipList.app_down_url_iOS);
      } else if (deviceType == "Android") {
        handleOpenLink(settings.value.appDownTipList.app_down_url_android);
      } else {
        handleOpenLink(settings.value.appDownTipList.app_down_url);
      }

      //   handleOpenLink(settings.value.appDownTipList.app_down_url);
      break;
    case 11: //  聊天信息
      if (Local.get("user")?.token) {
        Local.set("iscocos", false);
        router.push(`/chatList`);
      } else {
        await User(pinia).setLogin(true);
        router.push("/");
      }
      break;
    default:
      break;
  }
};

const signOut = async () => {
  Local.remove("user");
  await User(pinia).setHasLogin(false);
  await User(pinia).getUserLoginInfo(null);
  await User(pinia).setLoadingEnd(false);
  location.href = "/";
};

const goToPage = (item: any) => {
  if (item.url) {
    router.push(`${item.url}`);
  }
  // 有奖反馈
  if (item.id == 3) {
    isShow.value = true;
  }
};
// 有奖反馈提交
const submit = () => {
  if (!content.value || content.value.length < 3) {
    toast_value.value = "rakeback_page_notLg";
    showToast.value = true;
    return;
  }
  const query = NetPacket.req_submit_suggest();
  query.aaa = aaa;
  query.bbb = bbb;
  query.role_id = roleInfo.value?.id;
  query.content = content.value;
  H5Websocket.sendMessageHandler(query);
  // Net.instance.sendRequest(query);
};

const notify_suggest = (rs: any) => {
  isShow.value = false;
  if (rs.code == 1) {
    toast_value.value = "bank_success";
    showToast.value = true;
  }
};

onMounted(() => {
  MessageEvent2.addMsgEvent(NetMsgType.msgType.msg_nodify_submit_suggest, notify_suggest);
});
onUnmounted(() => {
  // 取消监听
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_nodify_submit_suggest, null);
});
</script>

<style lang="scss" scoped>
.me {
  // background-image: url(/imgs/common/bg_img.webp);
  //  background-size: 100% 100%;
  // background-color: #000000;

  overflow: auto;
  padding-bottom: 80px;

  .scroll_area {
    width: 100%;
    border-top: 2px solid #2e296b;
    box-shadow: 0px -2px 4px 0px #00000040;
    padding-top: 14px;
    box-sizing: border-box;
    margin-bottom: 50px;
    margin-top: -10px;
  }

  .main_content {
    height: 70vh;
    box-sizing: border-box;
  }
}

.action_wrap {
  padding: 0 14px;
}

.action_list {
  margin-top: 15px;
  padding: 0 15px;
  background-color: #131232;
  border-radius: 8px;

  .item_left {
    display: flex;
    align-items: center;

    img {
      height: 20px;
      margin-right: 4px;
    }

    span {
      color: #ffffff;
      font-weight: 500;
      font-size: 13px;
    }

    .unread {
      margin-left: 8px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: red;
      line-height: 12px;
      border-radius: 12px;
      padding: 2px;
      min-width: 16px;
      height: 16px;
    }
  }

  &:deep(.nut-collapse-item) {
    .nut-collapse__item-wrapper__content {
      padding: unset;
      background: #1b1a44;
    }

    .nut-collapse-item__title {
      margin-bottom: 10px;
      height: 45px;
      background-color: unset;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      color: #ffffff;
      font-weight: 500;
      font-size: 13px;

      &::after {
        border: unset;
      }
    }
  }
}

.other_list_item {
  height: 45px;
  // border-image: url('/imgs/me/list_bg.webp') 0 25 0 25 fill / 0px 16px stretch stretch;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding: 0 14px;

  .item_left {
    display: flex;
    align-items: center;

    img {
      height: 20px;
      margin-right: 4px;
    }

    span {
      color: #ffffff;
      font-weight: 500;
      font-size: 13px;
    }
  }

  .arrow {
    height: 16px;
  }
}

.list-sub_item {
  height: 43px;

  border-radius: 12px;

  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  box-sizing: border-box;

  .item-left {
    display: flex;
    align-items: center;

    img {
      height: 20px;
      margin-right: 4px;
    }

    span {
      color: #ffffff;
      font-weight: 500;
      font-size: 13px;
    }
  }

  .arrow {
    height: 16px;
  }
}

.msgNumber {
  border-radius: 50%;
  background: red;
  width: 12px;
  height: 12px;
  text-align: center;
  font-size: 10px;
  line-height: 12px;
  margin-left: 6px;
  color: #fff;
}

.sign_out {
  display: flex;
  justify-content: center;
  align-items: center;
  // margin: 30px 14px 0 14px;
  width: 100%;
  height: 46px;
  background: #131232;
  color: #ff4a5e;
  border-radius: 8px;
  margin-top: 30px;
}

:deep(.nut-dialog) {
  padding: unset;
  width: 236px;
  height: 300px;

  .nut-dialog__content {
    margin: unset;
  }

  .nut-dialog__footer {
    display: none;
  }
}

.submit_btn {
  margin: 38px;
  display: flex;
  justify-content: center;

  .submit {
    width: 100%;
    height: 44px;
    border-radius: 8px;
  }
}

.popup_body {
  padding: 15px 15px 10px 15px;

  .info {
    font-size: 12px;
    color: #c0c2db;
    text-align: left;
    margin-bottom: 6px;
  }

  .nut-textarea {
    box-shadow: 0px 4px 4px 0px #00000040 inset;
    border-radius: 8px;
    border-bottom: unset;
    display: flex;
    justify-content: center;
    background: #27155c;
    background-blend-mode: overlay;
    padding: 10px;
    background: radial-gradient(50% 208.33% at 50% 50%,
        rgba(126, 126, 126, 0.32) 0%,
        rgba(21, 21, 21, 0.32) 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.1) 100%);

    &:deep(.input-text) {
      text-align: center !important;
    }

    &:deep(.nut-textarea__textarea) {
      color: #ffffff;
    }
  }
}

.flex_align_center {
  display: flex;
  align-items: center;
}

.mr-4 {
  margin-right: 4px;
}

.mr-9 {
  margin-right: 9px;
}
</style>
